<template>
  <div class="week-list">
    <div class="nav-bar-wrap">
      <van-nav-bar  title="预约会议" left-text="返回" right-text="确认" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
    </div>
    <van-cell-group class="list">
      <van-cell :title="item.name" v-for="(item, index) in dataList" :key="index" @click="choose(item,index)">
        <span :class="{'icon-choose':item.choosed}"></span>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { Cell, CellGroup, Icon, NavBar, Toast } from 'vant'
import local from '../../service/local.service.js'
export default {
  data() {
    return {
      localData: {},
      dataList: [
        {
          id: 7,
          choosed: false,
          name: '每周日',
          num:'日',
          idx: 0
        },
        {
          id: 1,
          choosed: false,
          name: '每周一',
          num:'一',
          idx: 1
        },
        {
          id: 2,
          choosed: false,
          name: '每周二',
          num:'二',
          idx: 2
        },
        {
          id: 3,
          choosed: false,
          name: '每周三',
          num:'三',
          idx: 3
        },
        {
          id: 4,
          choosed: false,
          name: '每周四',
          num:'四',
          idx: 4
        },
        {
          id: 5,
          choosed: false,
          name: '每周五',
          num:'五',
          idx: 5
        },
        {
          id: 6,
          choosed: false,
          name: '每周六',
          num:'六',
          idx: 6
        }
      ],
      chooseList:[]
    }
  },
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [NavBar.name]: NavBar,
    [Toast.name]: Toast
  },
  methods: {
    choose(item,index){
      this.dataList[index].choosed = !this.dataList[index].choosed
    },
    handleData (){
      this.chooseList = []
      this.dataList.forEach((item, index)=>{
          if(item.choosed){
            this.chooseList.push(item)
          }
      })
    },
    onClickLeft(){
      this.$router.go(-1)
    },
    onClickRight(){
      this.handleData()
      if(this.chooseList.length===0){
        Toast('你还没有选择重复的日期！');
      }else{
        let editData = local.get('editData') || ''
        this.localData.weekList = this.chooseList
        if(editData){
         local.set('editData',this.localData)
         this.$router.push('appointment')
        }   
      }
    },
    initData(){
      let editData = local.get('editData') || ''
      if(editData){
        this.localData = editData
        if(editData.weekList && editData.weekList.length !== 0){
             editData.weekList.forEach((ele, index) => {
              this.dataList[ele.idx].id = ele.id
              this.dataList[ele.idx].choosed = ele.choosed
              this.dataList[ele.idx].name = ele.name
              this.dataList[ele.idx].num = ele.num
              this.dataList[ele.idx].idx = ele.idx
             }) 
        }
      }
    }
  },
  mounted(){
     this.initData()
  }
}
</script>

<style scoped lang='less'>
.week-list {
  //padding-top:20px;
  .list {
    margin-top: 80px;
  }
  .icon-choose {
    display: inline-block;
    background: url('../../images/choose.jpg') no-repeat;
    background-size: 100%;
    width: 20px;
    height: 16px;
    line-height: 16px;
  }
}
</style>